<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
  let currentIndex=0;
  let currentLi;
  const lisnum=8;
   const ul=document.createElement("ul");
    for(let i=0;i<lisnum;i++){
    const li=document.createElement("li");
    li.innerText="好好学习，天天向上" + i;
      ul.appendChild(li);
    }
      document.body.appendChild(ul);
      function render(){
        if(currentLi){currentLi.style.backgroundColor="";}
        var list=ul.querySelectorAll("li");
         currentLi=list.item(currentIndex);
        currentLi.style.backgroundColor="yellow";
  }
      render();
  document.addEventListener("keydown",function (event){
     if(event.keyCode === 38){
           if(currentIndex === 0){
             currentIndex=lisnum-1;
           }
           else{
             --currentIndex;
           }
           render();
     }
     if(event.keyCode === 40){
             if(currentIndex === lisnum-1){
               currentIndex=0;
             }
             else{
               ++currentIndex
             }
             render();
     }
  });
  </script>
</body>
</html>
